<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col v-for="item in formList" :key="item.name" :style="item.style">
          <el-form-item :label="item.label">
            <template v-if="item.type === 'input'">
              <el-input
                v-model="form[item.name]"
                :placeholder="item.placeholder || '请输入'"
              ></el-input>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select
                v-model="form[item.name]"
                :placeholder="item.placeholder || '请选择活动区域'"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="val in item.option"
                  :key="val.value"
                  :label="val.label"
                  :value="val.value"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="item.type === 'checkedNumberInput'">
              <checkeInputNumber
                :multiple="item.multiple"
                :attribute="item.attribute"
                v-model="form[item.name]"
                :placeholder="item.placeholder || '请输入'"
              />
            </template>
            <template v-else-if="item.type === 'textarea'">
              <el-input
                type="textarea"
                v-model="form[item.name]"
                v-bind="item.attribute"
              ></el-input>
            </template>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上传">
            <uploadImg></uploadImg>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item class="form-btn">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import checkeInputNumber from "./checkeInputNumber.vue";
import uploadImg from "./uploadImg.vue";
export default {
  name: "CateringManagementFormModal",
  components: { checkeInputNumber, uploadImg },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        chexiang: {},
      },
      formList: [
        {
          type: "input",
          name: "chepai",
          label: "车牌号",
          placeholder: "请选择",
          style: {
            width: "400px",
          },
        },
        {
          type: "select",
          name: "chexing",
          option: [
            { value: "a", label: "大型 " },
            { value: "b", label: "中型 " },
            { value: "c", label: "小型 " },
          ],
          label: "车型",
          placeholder: "请输入",
          style: {
            width: "400px",
          },
        },
        {
          type: "checkedNumberInput",
          name: "chexiang",
          multiple: "checked",
          option: ["mik1", "mik2", "mik3"],
          label: "车型",
          attribute: {
            placeholder: "请输入",
            style: {
              width: "72px",
            },
          },
          style: {
            width: "400px",
          },
        },
        {
          type: "input",
          name: "weiban",
          label: "围板称重",
          placeholder: "请选择",
          style: {
            width: "400px",
          },
        },
        {
          type: "checkedNumberInput",
          name: "tiji",
          multiple: "radio",

          label: "体积",
          attribute: {
            placeholder: "请输入",
            style: {
              width: "100%",
            },
          },
          style: {
            width: "400px",
          },
        },
        {
          type: "textarea",
          name: "beizhu",
          label: "备注",

          style: {
            width: "100%",
          },
          attribute: {
            autosize: { minRows: 1, maxRows: 3 },
            resize: "none",
            maxlength: 20,
            showWordLimit: true,
            placeholder: "请输入",
          },
        },
      ],
      title: "添加车辆",
    };
  },

  mounted() {},

  methods: {
    onSubmit() {
      console.log("submit!", this.form);
    },
  },
};
</script>

<style lang="less" scoped>
.form-item {
  width: 380px;
}
.form-btn {
  width: 100%;
}
&::v-deep .el-input__count {
  line-height: 34px;
  background: none;
  bottom: 0;
}
</style>
